<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        body{

            background-color: #EEEEEE;
        }

        #carousel-example-generic img{
            margin: 0 auto;
        }

        #carousel-example-generic{
            margin-top: 0px;
        }

    </style>
</head>
<body>
<!--导航条，在顶部固定:nav:html5新出的一个标记，具有比较强的语义性-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <!--导航条的头部-->
    <div class="navbar-header">
        <a class="navbar-brand" >
            图片分享
        </a>
        <!-- 缩小之后的按钮 -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

        </button>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav navbar-right">

            <li th:if="${session.loginuser==null}"><a  id="login"><span class="glyphicon glyphicon-fire"></span><span id="login_info">登录</span></a></li>
            <li th:if="${session.loginuser!=null}"><a><span th:text="|${session.loginuser==null?'':session.loginuser.user_name}已经登录|"></span></a></li>
            <li th:if="${session.loginuser==null}"><a th:href="@{/front/registerUI}"><span class="glyphicon glyphicon-fire"></span>注册</a></li>
            <li th:if="${session.loginuser!=null}"><a href="userCenter.html"><span class="glyphicon glyphicon-list"></span>个人中心</a></li>

        </ul>
    </div>

</nav>




<div class="media" style="width: 70%;margin: 100px auto">
    <div class="media-left media-top">
        <a href="#">
<!--            <video  class="media-object" style="width: 600px" controls id="my_video">&lt;!&ndash;-->
<!--                            /video_prj/upvideo/0cbe0b92-e660-4b82-97ba-3189ab98e3b8.mp4-->
<!--                            &ndash;&gt;-->
<!--                <source th:src="|@{/}${video.video_url}|" type="video/mp4"></source>-->
<!--                -->
<!--            </video>-->
            <img th:src="|@{/}${image.image_url}|" style="width: 600px" controls id="my_image">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading" th:text="${image.image_name}"></h4>
        <h1>&nbsp;</h1>

        <p>图片类型：<span  th:text="${image.imageType==null?'':image.imageType.type_name}">10</span></p>
        <p>发布人：<span th:text="${image.user==null?'':image.user.user_name}">10</span></p>
        <p>发布时间：<span th:text="${#dates.format(image.image_time,'yyyy-MM-dd HH:mm:ss')}">10</span></p>


        <p>浏览次数：<span th:text="${image.image_play}" id="play_count_span">10</span>点赞次数：<span th:text="${image.image_good}"></span></p>
        <p>

            <button type="button" th:class="${isCollect?'btn btn-warning btn-sm':'btn btn-default btn-sm'}" id="collect_btn">
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                <span id="c_txt" th:text="${isCollect?'取消收藏':'收藏'}"></span>
            </button>

            <!--
              如果说需要看当前用户有没有点赞过该视频
              数据库中需要建立一张表：user_id  video_id(联合主键 ，都是外键)，
              接下来可以按照和收藏相同的方式处理点赞按钮了
            -->
            <button type="button" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 点赞
            </button>
        </p>
<!--        <p>-->
<!--            <button type="button" class="btn btn-success btn-lg" id="play_btn">-->
<!--                <span class="glyphicon glyphicon glyphicon-play" aria-hidden="true"></span> 播放-->
<!--            </button>-->
<!--        </p>-->
    </div>

     <!--在隐藏域中保留了videoId-->
    <input type="hidden" name="imageId" th:value="${image.image_id}"/>
</div>
<script type="text/javascript" th:src="@{/asserts/js/jquery-1.12.3.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/js/bootstrap.min.js}"></script>

<script>
    $("#collect_btn").click(function(){

              if($("#c_txt").text()=='收藏'){
                  $("#c_txt").text('取消收藏');
                  $(this).removeClass("btn-default");
                  $(this).addClass("btn-warning");
                  //向服务器发送ajax请求,取消收藏
                  $.ajax({
                      type:"post",
                      url:"/front/doCollect",
                      data:{"image_id":$(":hidden[name=imageId]").val()},
                      error:function(){
                          alert("test");
                      },
                      success:function(data){

                          alert(data);
                      }


                  });


              }
              else{
                  $(this).removeClass("btn-warning");
                  $(this).addClass("btn-default");
                  $("#c_txt").text('收藏');
                  //向服务器发送ajax请求进行收藏
                  $.ajax({
                      type:"post",
                      url:"front/cancelCollect",
                      data:{"image_id":$(":hidden[name=imageId]").val()},
                      error:function(){
                          alert("test");
                      },
                      success:function(data){

                          alert(data);
                      }


                  });
              }

    });

<!--    $("#play_btn").click(function(){-->
<!--            //让视频自动播放-->
<!--            $("#my_image")[0].play();-->
<!--    })-->

<!--    //对视频标记加事件，当视频播放完毕的时候-->
<!--    document.getElementById("my_image").addEventListener("ended",function(){-->
<!--        $.ajax({-->
<!--            type:"post",-->
<!--            url:"/front/addPlayCount",-->
<!--            data:{"image_id":$(":hidden[name=imageId]").val()},-->
<!--            error:function(){-->
<!--                alert("test");-->
<!--            },-->
<!--            success:function(data){-->

<!--                if(data=="success"){-->

<!--                    var count=parseInt($("#play_count_span").text());-->
<!--                    $("#play_count_span").text(count+1);-->
<!--                }-->
<!--            }-->


<!--        });
    })-->
</script>

</body>
</html>